<template>
	<!-- 车辆列表 -->
	<div class="content" v-if="!is_detail">
		<div class="content-top">
			车辆管理_车辆审批列表
		</div>
		<div class="content-operation">
			<el-button type="primary" icon="el-icon-plus" @click='is_add = true' v-if="has_add">添加车辆</el-button>
		</div>
		<div class="content-search">
			<el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;">
				<el-form-item label="车牌号">
					<el-input v-model="car_licensePlateNumber" clearable placeholder="车牌号"></el-input>
				</el-form-item>
				<el-form-item label="车架号">
					<el-input v-model="car_vin" clearable placeholder="车架号"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="car_status" clearable placeholder="请选择">
						<el-option v-for="item in dict.status" :key="item.status" :label="item.type" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
				<el-button type="primary"  @click='search' icon="el-icon-search">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="content-table content-table1">
			<el-table :data="tableData"  show-header stripe style="width: 100%;">
				<el-table-column prop="licensePlateNumber" label="车牌号" width="200">
				</el-table-column>
				<el-table-column prop="vin" label="车架号" width="200">
				</el-table-column>
				<el-table-column prop="ownerName" label="产权人" width="300">
				</el-table-column>
				<el-table-column prop="initBatteryCode" label="电池包编码" width="200">
				</el-table-column>
				<el-table-column prop="salesInfoAuditUserName" label="录入人" >
				</el-table-column>
				<el-table-column prop="status" label="状态" width="200">
					<template slot-scope="scope">
						<span v-if="scope.row.status == item.value" v-for='item in dict.status'>{{item.type}}</span>
					</template>

				</el-table-column>
				<el-table-column prop="salesInfoDate" label="录入时间" width="200">
				</el-table-column>
				<el-table-column  label="操作" width="200">
					<template slot-scope="scope">
						<el-button @click="edit(scope.row)" v-if="has_edit && scope.row.status == 0" type="text" size="small"><i class="el-icon-edit"></i> 修改</el-button>
						<el-button @click="out(scope.row)" v-if="has_edit && scope.row.status == 0" type="text" size="small"><i class="el-icon-upload2"></i> 出库</el-button>
						<el-button @click="showdetail(scope.row)" v-if="has_edit" type="text" size="small"><i class="el-icon-view"></i> 详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
			 :page-size=limit layout="prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<template v-if="is_add">
			<div class="all-screen"></div>
			<div class='add-box'>
				<StockIn @saveAdd='saveAdd'></StockIn>
			</div>
		</template>
		<template v-if="is_edit">
			<div class="all-screen"></div>
			<div class='add-box'>
				<VehicleEdit @saveEdit='saveEdit' :id='id'></VehicleEdit>
			</div>
		</template>
		<template v-if="is_checkout">
			<div class="all-screen"></div>
			<div class='add-box'>
				<CarCheckout @saveCheckout='saveCheckout' :id='id' :vin='vin'></CarCheckout>
			</div>
		</template>
	</div>
	<VehicleDetail @showList='show_list' :id='id' v-else></VehicleDetail>
</template>

<script>
	import StockIn from '@/components/vehicle/StockIn.vue'
	import VehicleEdit from '@/components/vehicle/VehicleEdit.vue'
	import CarCheckout from '@/components/vehicle/CarCheckout.vue'
	import VehicleDetail from '@/components/vehicle/VehicleDetail.vue'
	let _this;
	export default {
		components: {
			StockIn: StockIn,
			VehicleEdit: VehicleEdit,
			CarCheckout:CarCheckout,
			VehicleDetail:VehicleDetail
		},
		props: ['power'],
		data() {
			return {
				car_vin:'',
				car_licensePlateNumber:'',
				car_status: "",
				flag: 0,
				id: 'id',
				userid:'',
				status: '',
				is_add: false,
				is_edit: false,
				is_history: false,
				is_checkout:false,
				is_detail:false,
				tableData: [],
				limit: 10,
				page: 1,
				total: 1,
				dict: '',
				has_add: false,
				has_edit: false,
				has_del: false,
				vin:'',
				info:{status:0},
				info_user:[],
			}
		},
		created() {
			_this = this;
		},
		mounted() {
			this.check_power();
			this.get_list();
			this.get_dict();
		},
		methods: {
			search(){
				this.page = 1;
				this.get_list();
			},
			show_list(){
				this.is_detail = false;
				this.get_list();
			},
			showdetail(row) {
				this.id = row.id;
				this.is_detail = true;
			},
			check_power() {
				this.power.forEach(function(element) {
					if (element.permissionName.indexOf("入库") != -1) _this.has_add = true;
					if (element.permissionName.indexOf("编辑") != -1) _this.has_edit = true;
					if (element.permissionName.indexOf("删除") != -1) _this.has_del = true;
				});
			},
			get_dict() {
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=vehicle')
					.then(function(res) {
						if (res != '')
							_this.dict = res.data;
					})
			},
			get_list() {
				this.$axios.post(this.$global.serverIp + 'vehicle/vehicle/unApprovedList', {
						"limit": this.limit + "",
						"page": this.page + "",
						"paginationFlag": true,
						"status": this.car_status,
						"licensePlateNumber":this.car_licensePlateNumber,
						"vin":this.car_vin
					})
					.then(function(res) {
						if (res != '') {
							_this.tableData = res.data.list;
							_this.total = res.data.totalCount;
							_this.page = res.data.currPage;
						}

					})

			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
				console.log(`当前页: ${val}`);
			},
			saveAdd(type) {
				if (type == 2) {
					this.get_list();
				}
				this.is_add = false;
			},
			saveHistory() {
				this.is_history = false;
			},
			saveCheckout(type){
				if (type == 2) {
					this.get_list();
				}
				this.is_checkout = false;
			},
			saveEdit(type) {
				if (type == 2) {
					this.get_list();
				} 
				this.is_edit = false;
			},
			out(row){
				this.id = row.id;
				this.vin = row.vin;
				this.is_checkout = true;
			},
			edit(row) {
				this.id = row.id;
				this.is_edit = true;
			}
		},


	}
	import '@/assets/css/common.css'
</script>

